<template>
  <div class="goods">
    <!-- 面包屑 -->
    <div class="goods_top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="goods_name">
      <!-- 搜索和添加 -->
      <div class="goods_name_input">
        <span class="goods_name_input_sou"
          ><input
            type="text"
            placeholder="请输入内容"
            v-model="value"
            @input="qwe"
          /><button @click="sou">
            <i class="el-icon-search"></i>
          </button>
        </span>
        <el-button type="primary" @click="add">添加商品</el-button>
      </div>
      <!-- 展示列表 -->
      <div class="goods_name_tab">
        <el-table
          ref="singleTable"
          :data="arrs"
          highlight-current-row
          border
          style="width: 100%"
        >
          <el-table-column type="index" width="50" label="#"> </el-table-column>
          <el-table-column property="date" label="商品名称" width="660">
            <template slot-scope="scope">
              <div>
                {{ scope.row.goods_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="name" label="商品价格(元)" width="80">
            <template slot-scope="scope">
              <div>
                {{ scope.row.goods_price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="商品重量" width="80">
            <template slot-scope="scope">
              <div>
                {{ scope.row.goods_weight }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="创建时间" width="185">
            <template slot-scope="scope">
              <div>
                {{ scope.row.add_time | filtime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" @click="amends(scope.row)"
                  ><i class="el-icon-edit"></i
                ></el-button>
                <el-button type="danger" @click="dels(scope.row.goods_id)"
                  ><i class="el-icon-delete"></i
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination
        @size-change="pagesn"
        @current-change="changepage"
        :current-page="pagenum"
        :page-sizes="[1, 2, 3, 4, 5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 修改弹出层 -->
      <el-dialog title="商品修改" :visible.sync="flag">
        <el-form :model="form">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-input
              v-model="form.goods_introduce"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="flag = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加商品弹出框 -->
    </div>
  </div>
</template>

<script>

export default {
  //数据
  data() {
    return {
      value: "",
      arrs: [],
      arrsd: [],
      pagesize: 5, //每一页的条数
      pagenum: 1, //页码值
      total: 10, //总条数
      flag: false, //修改状态
      // 修改数据
      form: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        id: "",
        pics: {},
        attrs: [],
      },
    };
  },
  //挂载后
  mounted() {
    this.goodss();
  },
  //方法
  methods: {
    // 展示列表
    goodss() {
      // this.$axios.get('http://localhost:8888/api/private/v1/goods',{onj}).then((res)=>{
      //   console.log(res);
      // })

      this.$http({
        url:"/goods",
        method:'get',
        params:{pagesize:this.pagesize,pagenum:this.pagenum, query:this.value }}
      ).then((res) => {
        console.log(res);
        this.arrs = res.data.goods;
        this.arrsd = res.data.goods;
        this.total = res.data.total;
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.select = "";
          this.rellist = {};
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },
    // 获取每页的数量
    changepage(val) {
      console.log(val +'页');
      this.pagenum = val;
      this.goodss();
    },
    // 获取多少页
    pagesn(val) {
      this.pagesize = val;
      this.goodss();
    },
    // 搜素
    sou() {
      if (this.value == "") {
        return this.goodss();
      } else {
        this.goodss();
      }
    },
    // input事件
    qwe() {
      if (!this.value) {
        this.goodss();
      }
    },
    // 删除
    dels(id) {
      this.$http.delete(`goods/${id}`,).then((res) => {
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.select = "";
          this.rellist = {};
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
        this.goodss();

      });
    },
    // 修改
    amends(row) {
      this.flag = true;
      this.form.goods_name = row.goods_name;
      this.form.goods_price = row.goods_price;
      this.form.goods_number = row.goods_number;
      this.form.goods_weight = row.goods_weight;
      this.form.goods_introduce = row.goods_introduce;
      this.form.id = row.goods_id;
    },
    // 确认修改
    confirm() {
      this.$http.put(`goods/${this.form.id}`,{
        goods_name: this.form.goods_name,
        goods_price: this.form.goods_price,
        goods_number: this.form.goods_number,
        goods_weight: this.form.goods_weight,
        goods_introduce: this.form.goods_introduce,
        pics: this.form.pics,
        attrs: this.form.attrs,
      }).then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.select = "";
          this.rellist = {};
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      })
      this.goodss();
      this.flag = false;
    },
    add() {
      this.$router.push({ path: "/add" });
    },
  },

  //过滤，筛选
  filters: {
    filtime(val) {
      var time = "";
      if (val) {
        var date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();
        time = `${year}-${month}-${day}${hour}:${min}:${sec}`;
        // time=`${year}-${month}-${day}${hour}:${min}:${sec}`;
      }
      return time;
    },
  },
};
</script>


<style lang="scss">
.goods {
  width: 100%;
  height: 100%;
}
.goods_top {
  width: 100%;
  height: 30px;
}
.goods_name {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 5px;
}
.goods_name_input {
  margin-left: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
}
.goods_name_input_sou {
  margin-right: 30px;

  input {
    width: 300px;
    height: 40px;
    border-radius: 5px 0px 0px 5px;
    border: 1px solid #ccc;
    padding-left: 10px;
    outline: none;
    vertical-align: middle;
  }
  button {
    width: 60px;
    height: 40px;
    background-color: #f5f7fa;
    border: 1px solid #ccc;
    border-left: none;
    vertical-align: middle;
    outline: none;
    border-radius: 0px 5px 5px 0px;
  }
}
.goods_name_tab {
  width: 98%;
  margin: auto;
}
</style>
